<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 22:39:35
-->
<template>
  <div  ref="bottom2_container" style="height:95%"></div>
</template>
<script>
import { Column } from '@antv/g2plot';
export default {
  data(){
    return{
      dataArr:[{
    type: '八',
    sales: 38,
  },
  {
    type: '七',
    sales: 52,
  },
  {
    type: '六',
    sales: 61,
  },
  {
    type: '五',
    sales: 145,
  },
  {
    type: '四',
    sales: 48,
  },
  {
    type: '三',
    sales: 38,
  },
  {
    type: '二',
    sales: 38,
  },
  {
    type: '一',
    sales: 38,
  },]
    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){const columnPlot = new Column(this.$refs.bottom2_container, {
  data:this.dataArr,
  xField: 'type',
  yField: 'sales',
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'bottom', 'middle',
    // 配置样式
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额',
    },
  },
});

columnPlot.render();
    }
  }
}
</script>